<template>
  <el-dialog
    title=""
    :visible="dialogVisible"
    width="70%"
    :before-close="handleClose"
    append-to-body
    :fullscreen="fullscreen"
    v-if="dialogVisible"
  >
    <div
      slot="title"
      style="display: flex; justify-content: space-between;align-items: center;"
    >
      <div>年度评价结果详情</div>
      <div
        style="margin-right: 30px; cursor: pointer;"
        @click="fullscreen = !fullscreen"
      >
        <img
          style="width: 18px; height: 18px;"
          :src="
            !fullscreen
              ? require('../../../assets/icon/add.png')
              : require('../../../assets/icon/fix.png')
          "
          alt=""
        />
      </div>
    </div>
    <div style="overflow-y: auto; height: 60vh;">
      <div class="person-msg">
        <div class="msg-item">
          <div class="msg-item-s">
            <div class="table-item">统一社会信用代码(纳税人识别号)</div>
            <div
              style="border-top: none; background-color: #fff"
              class="table-item"
            >
              {{ detailInfo.enterpriseInfo.creditCode }}
            </div>
          </div>
          <div class="msg-item-s">
            <div class="table-item">纳税人名称</div>
            <div class="table-item" style="background-color: #fff">
              {{ detailInfo.enterpriseInfo.taxpayerName }}
            </div>
          </div>
        </div>

        <div class="title-one mt10">评价年度确认结果</div>
        <div class="msg-item">
          <div class="msg-item-s bordernone">
            <div class="table-item">评价年度</div>
            <div
              style="border-top: none; background-color: #fff"
              class="table-item"
            >
              {{ detailInfo.creditEvl.evaluationYear }}
            </div>
          </div>
          <div class="msg-item-s bordernone">
            <div class="table-item">评价结果</div>
            <div class="table-item" style="background-color: #fff">
              {{ detailInfo.creditEvl.evaluationResult }}
            </div>
          </div>
        </div>
        <div class="msg-item">
          <div class="msg-item-s bordernone">
            <div class="table-item">法定代表人</div>
            <div class="table-item" style="background-color: #fff">
              {{ detailInfo.enterpriseInfo.legalPerson }}
            </div>
          </div>
          <div class="msg-item-s bordernone">
            <div class="table-item">登记日期</div>
            <div class="table-item" style="background-color: #fff">
              {{ detailInfo.enterpriseInfo.taxRegister }}
            </div>
          </div>
        </div>
        <div class="msg-items1">
          <div class="table-item1">主管税务机关</div>
          <div class="table-item1" style="background-color: #fff">
            {{ detailInfo.enterpriseInfo.taxOffices }}
          </div>
        </div>
        <div class="title-one mt10">纳税信用评价指标扣分记录</div>
        <div>
          <el-table :data="detailInfo.taxCreditEvaluationRecords" border>
            <el-table-column label="序号" type="index" width="50">
            </el-table-column>
            <el-table-column
              prop="indicatorCode"
              label="扣分指标代码"
              width="180"
            >
            </el-table-column>
            <el-table-column prop="indicatorName" label="扣分指标名称">
            </el-table-column>
            <el-table-column
              prop="indicatorScore"
              label="扣分指标分值"
              width="180"
            >
            </el-table-column>
          </el-table>
        </div>
        <div class="title-one mt10">纳税信用动态管理记录</div>

        <el-table :data="detailInfo.taxCreditDynamicManagementRecords" border>
          <el-table-column label="序号" type="index" width="50">
          </el-table-column>
          <el-table-column
            prop="dynamicManagementType"
            label="动态管理类型"
            width="180"
          >
          </el-table-column>
          <el-table-column prop="sourceIndicatorResult" label="原评价结果">
          </el-table-column>
          <el-table-column prop="dynamicManagementReason" label="动态管理原因">
          </el-table-column>
          <el-table-column
            prop="dynamicManagementIndicatorResult"
            label="动态管理评价结果"
            width="180"
          >
          </el-table-column>
        </el-table>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { getAnnualEvaluationResultsDetail } from "@/api/tax";
export default {
  data() {
    return {
      dialogVisible: false,
      detailInfo: {},
      fullscreen: false
    };
  },
  methods: {
    //   关闭弹框
    handleClose() {
      this.dialogVisible = false;
    },
    //打开弹框
    openDia(v) {
      getAnnualEvaluationResultsDetail(v.id).then(res => {
        this.detailInfo = res.data ? res.data : {};
      });
      this.dialogVisible = true;
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/ .el-dialog__body {
  padding: 0 30px 30px;
}
.title-one {
  font-weight: bold;
  font-size: 14px;
  padding-left: 5px;
  border-left: 4px solid #409eff;
}
.mt10 {
  margin: 10px 0;
}
.person-msg {
  margin-top: 20px;
  .msg-item {
    display: flex;
    align-items: center;
    // justify-content: space-between;
    width: 100%;
    > div {
      &:nth-child(1) {
        border-right: none;
      }
      &:nth-child(2) {
      }
    }
    .msg-item-s {
      width: 50%;
      display: flex;
      align-items: center;
      border: 1px solid #ccc;

      > div {
        &:nth-child(1) {
          border-right: 1px solid #ccc;
        }
        &:nth-child(2) {
          background-color: #f5f5f5;
        }
      }
      .table-item {
        width: 100%;
        // padding: 10px;
        padding-left: 10px;
        height: 50px;
        display: flex;
        flex-direction: column;
        justify-content: center;

        // line-height: 50px;
        // margin-right: 20px;
      }
    }
  }

  .msg-items1 {
    width: 100%;
    display: flex;
    height: 50px;
    align-items: center;
    border: 1px solid #ccc;

    > div {
      padding: 10px;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      &:nth-child(1) {
        width: 25%;
        border-right: 1px solid #ccc;
      }
      &:nth-child(2) {
      }
    }
  }
}
</style>
